<template>
    <div class="sw">
        <el-switch 
            @change="changeFun"
            :width="50"
            v-model="staTus"
            active-color="#409EFF"
            :active-value="1"
            :inactive-value="0"
            inactive-color="#C0CCDA">
        </el-switch>
        <span :class="staTus===1?'span1':'span2'">{{staTus===1?'开启':'关闭'}}</span>
    </div>
</template>
<script>
import {status} from '../api/vxapi'
export default {
    props:['staTus'],
    data() {
        return {
        }
    },
    methods: {
        changeFun(val){
            console.log(val);
            status(val).then((res)=>{
                console.log(res.data);
                if(res.data.status==200){
                    this.$message({
                        message: res.data.msg,
                        type: 'success',
                        duration:1000
                    });
                }else{
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration:1000
                    });
                }
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.sw{
    width: 100%;
    height: 100%;
    position: relative;
}
span{
    display: inline-block;
    color: white;
    position: absolute;
    left:118px;
    top: 0px;
}
.span1{
    display: inline-block;
    color: white;
    position: absolute;
    left:118px;
    top: 0px;
}
.span2{
    display: inline-block;
    color: white;
    position: absolute;
    left:133px;
    top: 0px;
}
</style>